<template>
    <div class="icon-text-container">
        <van-icon name="arrow-left" @click="returnMyView()" />
        <span class="text">收货地址</span><span class="nav-right" @click="toAddAddress()">新增地址</span>
    </div>
    <div class="wrapper">
        <van-cell-group inset v-for="(item, index) in addressInfo" :key="index">
            <van-tag size="large" color="#E8F7FE" text-color="#59B5F5" class="wrapper-tag">{{ item.tag }}</van-tag>
            <van-text-ellipsis :content="item.deliveryAddress" />
            <img class="wrapper-img" src="/src/assets/icon/bianji (1).svg" @click="toUpdateAddress(index)" />
            <div class="wrapper-name">{{ item.contactName
                }}</div> <span class="wrapper-sex">{{ item.sex===0?"(先生)":"(女士)" }}</span><span class="wrapper-phone">{{ item.phoneNumber }}</span>
        </van-cell-group>
    </div>

</template>

<script setup>
import http from '../../utils/http';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref} from 'vue';

const addressInfo = ref([]);
//数据处理区
const userId = localStorage.getItem("userId");
const addressList = async () => {
    try {
        const response = await http.get(`/address/listAddress/${userId}`);
        addressInfo.value = response.data
    }
    catch (error) {
        console.error(error);
    }
};
onMounted(() => {
    addressList();
})


//编程路由区
const router = useRouter();
const route = useRoute();
function returnMyView() {
    router.push('/myHome');
}
function toAddAddress() {
    router.push('/addAddress1')
}
function toUpdateAddress(index) {
    router.push({
        path:'/updateAddress',
        query:{
            addressId:addressInfo.value.addressId
        }
    })
}
</script>

<style lang="scss" scoped>
.wrapper {
    background-color: #F4F4F4;
    width: 100vw;
    height: 617px;

    .wrapper-tag {
        margin-top: 13px;
        margin-left: 5px;
    }

    .wrapper-name {
        display: inline-block;
        margin-top: 5px;
        margin-left: 10px;
        color: #999999;
    }

    .wrapper-sex {
        color: #999999;
    }

    .wrapper-phone {
        margin-left: 5px;
        color: #999999;
    }

    .wrapper-img {
        width: 20px;
        margin-left: 5px;
        margin-top: 10px;
        margin-right:5px;
        float:right;
    }
}

//顶头一行的样式
.icon-text-container {
    display: flex;
    align-items: center;
    line-height: 50px;
    /* 调整垂直对齐 */
    font-size: 22px;

    /* 设置整体字体大小，图标和文字都会放大 */
    .nav-right {
        font-size: 16px;
        margin-left: 75px;
    }
}

//顶头图标与文字间距
.text {
    font-size: 20px;
    font-weight: bold;
    margin-left: 120px;
    /* 图标和文本之间的间距 */
}

.avatar-img {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-top: 7px;
    margin-left: 5px;
}

.avatar-xiala {
    margin-left: 280px;
    margin-bottom: 10px;
}

::v-deep(.van-cell-group) {
    display: inline-block;
    width: 375.2px;
    height: 75px;
    /* margin-bottom:-10px; */
    margin-top: 5px;
    margin-left: -0px;
    border-radius: 0px;
}

::v-deep(.van-text-ellipsis) {
    display: inline-block;
    width: 74%;
    font-size: 18px;
    margin-left: 8px;
}
</style>